<template>
  <section>
    <div class="custorm--modelbox goodsnone-edit">
      <renohome-right-nav :custormItemData="custormItemData" @rightNavChange="rightNavChange"></renohome-right-nav>

      <div class="edit-form-item">
          <div class="form-label">模式选择</div>
          <el-radio-group v-model="custormItemData.params.pattern" @change="patternbtn">
            <el-radio :label="1">模式一</el-radio>
            <el-radio :label="2">模式二</el-radio>
            <el-radio :label="3">模式三</el-radio>
          </el-radio-group>
      </div>
      <div class="edit-form-item" v-if="custormItemData.params.pattern==2">
        <div>
          <div class="form-label">顶部分类</div>
          <el-radio-group v-model="custormItemData.params.classtype">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="2" :disabled="custormItemData.params.pattern==3?true:false">关闭</el-radio>
          </el-radio-group>
        </div>
      </div>
       <div class="edit-form-item" v-if="custormItemData.params.pattern==3">
        <div>
          <div class="form-label">是否显示导航</div>
          <el-radio-group v-model="custormItemData.params.shownavigation">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="2">关闭</el-radio>
          </el-radio-group>
        </div>
      </div>
       <div class="edit-form-item" v-if="custormItemData.params.pattern==3">
         <div class="es-form-item">
          <div class="form-label mb-20">轮播图片</div>
          <div v-for="(item, index) in custormItemData.data" :key="index">
            <div class="item" draggable="false">
              <i class="el-icon-circle-close   delete-child" @click="delItemList({data:custormItemData.data,index})"></i>
              <div class="item-inner "><span class="labeltext">图片</span>
                <div typetext="图片" show="0" class="small" style="align-self: start;">
                  <div class="uploadSource solid"><i class="delete ivu-icon iconfont icon-input_clear" style="font-size: 16px;"></i>
                    <div
                      class="img"
                      @click="uploadtoggle(index,'image')"
                      :style="{'background-image':`url(${getPath(item.thumb.file_path)})`,
                    'height':'50px','background-repeat':'no-repeat','background-size':'cover','background-position':'50%'}"></div>
                  </div>
                </div>
              </div>
              <div class="item-inner ">
                <span class="labeltext">链接</span>
                <div class="readonly-div" @click="uploadtoggle(index,'link')">
                  <div class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type">
                    <input
autocomplete="off"
spellcheck="false"
type="text"
placeholder="请选择链接"
readonly="readonly"
                    class="ivu-input ivu-input-default"
:value="typeof item.link === 'string' ? item.link : item.link.path">
                  </div> <i class="icon icon-fujian readonly-icon" style="left: 12px;margin-top:-3px;"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="goodscol-add" @click="addItemList({data:custormItemData.data,max:8,itemCopy:{link: '',thumb: {file_path: 'default_btn1.png'}}})"><i class="el-icon-plus"></i> 添加 {{custormItemData.data.length}}/8</div>
          <div style="margin-top:10px;">建议宽高：370x210</div>
        </div>
       </div>

      <div class="edit-form-item">
        <div class="form-label">颜色选择</div>
        <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">标题栏文字</span>
          <el-radio-group
            v-model="custormItemData.style.texttype"
            class="flex-row mar-15"
          >
            <el-radio label="1">黑色</el-radio>
            <el-radio label="2">白色</el-radio>
          </el-radio-group>
        </div>
        <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">标题栏背景</span>
          <el-color-picker
            class="ivu-input"
            v-model="custormItemData.style.bgcolor"
            size="mini"
          ></el-color-picker>
          <span class="ivu-input">{{custormItemData.style.bgcolor}}</span>
        </div>
      </div>

      <div class="edit-form-item">
        <div class="form-label">页面设置</div>
        <div class="stylebox flex-row ivu-color-picker">
          <span class="stylebox-label">页面名称</span>
          <div class="flex-col">
            <el-input
              placeholder="请输入页面名称"
              v-model="custormItemData.name"
            ></el-input>
            <p class="ivu-input">页面名称仅用于后台查找</p>
          </div>
        </div>
        <div class="stylebox flex-row ivu-color-picker">
          <span class="stylebox-label">页面标题</span>
          <div class="flex-col">
            <el-input
              placeholder="请输入页面标题"
              v-model="custormItemData.params.title"
            ></el-input>
            <p class="ivu-input">小程序端顶部显示的标题</p>
          </div>
        </div>
        <div class="stylebox flex-row ivu-color-picker">
          <span class="stylebox-label">分享标题</span>
          <div class="flex-col">
            <el-input
              placeholder="请输入分享标题"
              v-model="custormItemData.params.sharetitle"
            ></el-input>
            <p class="ivu-input">小程序端转发时显示的标题</p>
          </div>
        </div>
        <div class="stylebox flex-row ivu-color-picker">
          <span class="stylebox-label">分享描述</span>
          <div class="flex-col">
            <el-input
              placeholder="请输入分享描述"
              v-model="custormItemData.params.shareinfo"
            ></el-input>
            <p class="ivu-input">小程序端分享时显示的描述文字</p>
          </div>
        </div>
        <div class="stylebox flex-row ivu-color-picker">
          <span class="stylebox-label">分享图片</span>
            <div class="flex-col">
              <div v-for="(item, index) in custormItemData.params.sharepath" :key="index">
                <div class="item" draggable="false" style="position:relative;">
                  <i class="el-icon-circle-close  delete-child" style="cursor: pointer;" @click="item.file_path = 'default_picture.png'"></i>
                  <div class="item-inner">
                    <div typetext="图片" show="0" class="small" style="align-self: start;">
                      <div class="uploadSource solid" style="cursor: pointer;"><i class="delete ivu-icon iconfont icon-input_clear" style="font-size: 16px;"></i>
                        <div
class="img"
@click="uploadtoggle(index,'image','sharepath')"
:style="{'background-image':`url(${getPath(item.file_path)})`,
                        'width':'50px','height':'50px','background-repeat':'no-repeat','background-size':'cover','background-position':'50%'}"></div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
            <p class="ivu-input">小程序端分享时显示的图片</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import defaultConfig from './utils/editConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  methods: {
    // uploadFileCallBack(files) {
    //   console.log("ddddddddddddddddddddddddd",files)
    //   const { key } = files
    //   if (key === 'ChooseFiles') {
    //     const { displayData: [file_path] } = files
    //     if (this.imgCurrent !== -1 && file_path) {
    //       this.$set(this.custormItemData.params, 'sharepath', [file_path])
    //       this.custormItemData.params.sharepath = [file_path]
    //       this.custormItemData.data[this.imgCurrent]['link'] = file_path
    //     } else {
    //       this.$message.error('请选择图片~!')
    //     }
    //   }
    // },
    // uploadtoggle(index, type) {
    //   this.output({ type, params: { editKey: this.custormItemData.key } })
    //   this.imgCurrent = index
    // },
    uploadFileCallBack(files) {
      const { key } = files
      if (key === 'ChooseLink') {
        const { currentRow: [file_path], displayData: [custorm] } = files
        console.log('aaaaaaaa', file_path)
        if (this.imgCurrent !== -1 && file_path) {
          this.$set(this.custormItemData.params, 'data', [file_path])
          this.custormItemData.data[this.imgCurrent]['link'] = file_path
        } else {
          if (custorm) {
            console.log('sssssssssssss', custorm)
            this.custormItemData.data[this.imgCurrent]['link'] = custorm
          } else {
            this.$message.error('请选择链接~!')
          }
        }
      } else {
        const { displayData: [file_path] } = files
        if (this.imgCurrent !== -1 && file_path) {
          if (this.linkModel === 'sharepath') {
            console.log('2222222', this.linkModel, this.custormItemData)
            this.custormItemData.params.sharepath[this.imgCurrent]['file_path'] = file_path.file_path
          } else {
            this.custormItemData.data[this.imgCurrent]['thumb'] = file_path
          }
        }
      }
    },
    uploadtoggle(index, type, mode = 'data') {
      this.linkModel = mode
      // var data = this.custormItemData[mode][index]['link']
      this.output({ type, params: { editKey: this.custormItemData.key } })
      this.imgCurrent = index
    },
    changeStyle(e, type) {
      this.$nextTick(() => {
        this[type === 'borderstyle' ? 'bordertype' : 'styletype'] = e
        this.custormItemData['style'][type] = e
      })
    },

    patternbtn(val) {
      console.log('1111111111111111111', val)
      if (val == 3) {
        // this.custormItemData.params.classtype ==2?this.custormItemData.params.classtype ==1:this.custormItemData.params.classtype ==2
        // console.log("555555555555555555",this.custormItemData.params.classtype==2)
        (this.custormItemData.params.classtype == 2 && this.custormItemData.params.pattern == 3) ? this.custormItemData.params.classtype == 1 : ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.stylebox-label{
  margin-right: 13px;
  line-height: 38px;
}
.stylebox{
  .ivu-input{
    margin-top: 5px;
  }
}
.delete-child{
  position: absolute;
  top: -5px;
  right: -5px;
}
</style>
